/**
 * 渠道数据管理初始化
 */
var VpnChannelActionInfo = {
    id: "VpnChannelActionInfoTable",	//表格id
    seItem: null,		//选中的条目
    table: null,
    layerIndex: -1,
    channelNoArr: "QOEWZ3",
    channelXmSelect: null
};

/**
 * 初始化表格的列
 */
VpnChannelActionInfo.initColumn = function () {
    return [[
        {title: '渠道编号', field: 'channelId', align: 'center',width: 100,
            templet:function (res) {
                return "000"+res.channelId;
            }
        },
        {title: '渠道名称', field: 'channelName', align: 'center',width: 150},
        {title: '状态', field: 'channelStatus', align: 'center',width: 80,
            templet:function (res) {
                if (res.channelStatus === 1){
                    return "<div style='color: #039535'>生效</div>";
                }else{
                    return "<div style='color: #930303'>停用</div>";
                }
            }
        },
        {title: '创建时间', field: 'createTime', align: 'center',width: 130,
            templet:function (res) {
                return new Date(res.createTime).format("yyyy-MM-dd");
            }
        },
        {title: '结束时间', field: 'endTime', align: 'center',width: 130,
            templet:function (res) {
                if (!$.trim(res.endTime)){
                    return "";
                }else{
                    return new Date(res.endTime).format("yyyy-MM-dd");
                }
            }
        },
        {title: '访问数量', field: 'pvCount',  align: 'center'},
        {title: '访问用户数', field: 'uvCount',  align: 'center'},
        {title: '安装量', field: 'downloadCount',  align: 'center'},
        {title: '注册用户数', field: 'registerCount',  align: 'center'},
        {title: 'VIP充值次数', field: 'payCount', align: 'center'},
        {title: 'VIP充值人数', field: 'payUserCount', align: 'center'},
        {title: '首次VIP充值次数', field: 'payOneCount', align: 'center',width: 150},
        {title: '7天VIP次数及金额', field: 'package1', align: 'center',width: 200,
            templet:function (res) {
                return res.package1+" / $"+res.money1;
            }
        },
        {title: '30天VIP次数及金额', field: 'package2', align: 'center',width: 200,
            templet:function (res) {
                return res.package2+" / $"+res.money2;
            }
        },
        {title: '90天VIP次数及金额', field: 'package3', align: 'center',width: 200,
            templet:function (res) {
                return res.package3+" / $"+res.money3;
            }
        },
        {title: '180天VIP次数及金额', field: 'package4', align: 'center',width: 200,
            templet:function (res) {
                return res.package4+" / $"+res.money4;
            }
        },
        {title: '365天VIP次数及金额', field: 'package5', align: 'center',width: 200,
            templet:function (res) {
                return res.package5+" / $"+res.money5;
            }
        }
    ]];
};

/**
 * 查询渠道数据列表
 */
VpnChannelActionInfo.search = function () {
    var queryData = {};
    queryData['beginTime'] = $("#beginTime").val();
    queryData['endTime'] = $("#endTime").val();
    VpnChannelActionInfo.table.reload("tableReload",{
        page: {
            curr: 1 //重新从第1页开始
        },
        where: queryData
    });
};


VpnChannelActionInfo.tableList = function(queryData){
    layui.use("table",function () {
        var table = layui.table;

        VpnChannelActionInfo.table = table;

        table.render({
            elem: "#table",
            url: Feng.ctxPath +"/vpnChannelActionInfo/list",
            cellMinWidth: 120,
            where: queryData,
            page: true,
            limit: 20,
            cols: VpnChannelActionInfo.initColumn(),
            parseData: function(res){
                return{
                    "code":0,
                    "msg":"获取成功",
                    "count":res.total,
                    "data": res.items
                }
            },
            text: {
                none: '暂无相关数据'
            },
            id: "tableReload"
        });
    });
};

/**
 * 导出表格
 */
VpnChannelActionInfo.exportExcl = function () {
    let beginTime = $("#beginTime").val();
    let endTime = $("#endTime").val();

    window.location.href = Feng.ctxPath + "/vpnChannelActionInfo/export?"
        +"beginTime="+beginTime+"&endTime="+endTime;
};

/**
 * 获取渠道线性增长数据
 * @param options
 */
VpnChannelActionInfo.getChannelLine = function(options){
    let ajax = new $ax(Feng.ctxPath + "/vpnChannelActionInfo/get/line", function (data) {
        VpnChannelActionInfo.showChannelIncreaseChart(data.dateArray,data.registerArray,data.downloadArray,data.pvArray,data.uvArray);
    }, function (data) {
        Feng.error("获取增长数据失败!"+ "!");
    });
    ajax.set("channelNoArr",VpnChannelActionInfo.channelNoArr);
    ajax.set("options",options)
    ajax.start();
}


/**
 * 展示渠道增长趋势
 */
VpnChannelActionInfo.showChannelIncreaseChart = function(xAxis,registerArray,downloadArray,pvArray,uvArray){
    let dom = document.getElementById("channelIncreaseChart");
    let myChart = echarts.init(dom);
    option = null;
    option = {
        tooltip: {
            trigger: 'axis'
        },
        legend:{
            data: ["访问量","访问人数","安装量","注册数量"]
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxis
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '访问量',
                type: 'line',
                data: pvArray
            },
            {
                name: '访问人数',
                type: 'line',
                data: uvArray
            },
            {
                name: '安装量',
                type: 'line',
                data: downloadArray
            },
            {
                name: '注册数量',
                type: 'line',
                data: registerArray
            }
        ]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
};


/**
 * 获取渠道总量数据
 */
VpnChannelActionInfo.getChannelTotal = function(options){
    let ajax = new $ax(Feng.ctxPath + "/vpnChannelActionInfo/get/total", function (data) {
        $("#pvCount").text(data.pvCount);
        $("#uvCount").text(data.uvCount);
        $("#downloadCount").text(data.downloadCount);
        $("#registerCount").text(data.registerCount);

    }, function (data) {
        Feng.error("获取总量数据失败!"+ "!");
    });
    ajax.set("channelNoArr",VpnChannelActionInfo.channelNoArr);
    ajax.set("options",options)
    ajax.start();
}
/**
 * 总量数据的条件选项发生改变
 */
VpnChannelActionInfo.selectChange = function(){
    let options = $("#totalSelect").val();
    VpnChannelActionInfo.getChannelTotal(options);
}
/**
 * 渠道增长线性条件选项发生改变
 */
VpnChannelActionInfo.lineSelectChange = function(){
    let options = $("#lineSelect").val();
    VpnChannelActionInfo.getChannelLine(options);
}

/**
 * 漏斗分析数据，条件选项发生改变
 */
VpnChannelActionInfo.funnelSelectChange = function(){
    let options = $("#funnelSelect").val();
    VpnChannelActionInfo.getChannelFunnel(options);
}

/**
 *  获取漏斗数据
 * @param options
 */
VpnChannelActionInfo.getChannelFunnel = function(options){
    let ajax = new $ax(Feng.ctxPath + "/vpnChannelActionInfo/get/funnel", function (data) {
        VpnChannelActionInfo.showFunnelCharts(data.uvCount,data.downloadCount,data.registerCount,data.paymentCount);
        let registerRate = "注册：0%";
        let buyRate = "购买：0%";
        if (data.registerCount !== 0 && data.uvCount !== 0){
            registerRate = "注册："+ ((data.registerCount/data.uvCount) * 100).toFixed(2)+"%";
        }else if(data.registerCount !== 0 && data.uvCount === 0){
            registerRate = "注册：100%"
        }

        if (data.paymentCount !== 0 && data.uvCount !== 0){
            buyRate = "购买："+ ((data.paymentCount/data.uvCount) * 100).toFixed(2)+"%";
        }else if(data.paymentCount !== 0 && data.uvCount === 0){
            buyRate = "购买：100%"
        }

        $("#registerRate").text(registerRate);
        $("#buyRate").text(buyRate);
    }, function (data) {
        Feng.error("获取漏斗数据失败!"+ "!");
    });
    ajax.set("channelNoArr",VpnChannelActionInfo.channelNoArr);
    ajax.set("options",options)
    ajax.start();
}

/**
 * 展示渠道漏斗图表
 */
VpnChannelActionInfo.showFunnelCharts = function(uvCount,downloadCount,registerCount,paymentCount){
    let myChart = echarts.init(document.getElementById('channelFunnelCharts'));
    let option = {
        calculable: true,
        series: [
            {
                name:'漏斗分析',
                type:'funnel',
                left: "-3%",
                width: '75%',
                min: 0,
                max: 120,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',//ascending
                gap: 2,
                label: {
                    normal: {
                        show: true,
                        formatter:  function (parms) {
                            //console.log('cansh参数：', parms)
                            if(parms.name=='访问用户'){
                                return "访问用户数: "+uvCount;
                            }
                            else if(parms.name=='安装用户'){
                                let dRate = "0%";
                                if (downloadCount !== 0 && uvCount !== 0){
                                    dRate = ((downloadCount/uvCount) * 100).toFixed(2) + '%';
                                }else if(downloadCount !== 0 && uvCount === 0){
                                    dRate = "100%";
                                }

                                return "安装用户数: "+downloadCount
                                    +" 访问用户安装转化率: " + dRate;
                            }
                            else if(parms.name=='注册用户'){

                                let rRate = "0%";
                                if (registerCount !== 0 && downloadCount !== 0){
                                    rRate = ((registerCount/downloadCount) * 100).toFixed(2) + '%';
                                }else if(registerCount !== 0 && downloadCount === 0){
                                    rRate = "100%";
                                }
                                return "注册用户数: "+registerCount
                                    +" 安装注册转化率: " + rRate;
                            }
                            else if(parms.name=='购买人数'){

                                let pRate = "0%";
                                if (paymentCount !== 0 && registerCount !== 0){
                                    pRate = ((paymentCount/registerCount) * 100).toFixed(2) + '%';
                                }else if(paymentCount !== 0 && registerCount === 0){
                                    pRate = "100%";
                                }
                                return "购买人数: "+paymentCount
                                    +" 注册购买转化率: " + pRate;
                            }
                        }
                        //position: 'inside'
                    },
                    emphasis: {
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },
                labelLine: {
                    normal: {
                        length: 50,
                        lineStyle: {
                            width: 1,
                            type: 'solid'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: '#fff',
                        borderWidth: 1
                    }
                },
                data: [
                    {value: 105, name: '访问用户', itemStyle: {
                            normal: {color: '#c20f23'}
                        }},
                    {value: 80, name: '安装用户', itemStyle: {
                            normal: {color: '#f58549'}
                        }},
                    {value: 55, name: '注册用户', itemStyle: {
                            normal: {color: '#c76f54'}
                        }},
                    {value: 30, name: '购买人数', itemStyle: {
                            normal: {color: '#e04c8c'}
                        }}
                ]
            },

            {
                name:'漏斗分析',
                type:'funnel',
                left: "-3%",
                width: '75%',
                min: 0,
                max: 120,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',//ascending
                gap: 2,
                label: {
                    normal: {
                        show: true,
                        position: 'inside',
                        formatter: function(params) {
                            return params.name
                        }
                    },
                    emphasis: {
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },
                labelLine: {
                    normal: {
                        length: 50,
                        lineStyle: {
                            width: 1,
                            type: 'solid'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: '#fff',
                        borderWidth: 3
                    }
                },
                data: [
                    {value: 105, name: '访问用户', itemStyle: {
                            normal: {color: '#c20f23'}
                        }},
                    {value: 80, name: '安装用户', itemStyle: {
                            normal: {color: '#f58549'}
                        }},
                    {value: 55, name: '注册用户', itemStyle: {
                            normal: {color: '#c76f54'}
                        }},
                    {value: 30, name: '购买人数', itemStyle: {
                            normal: {color: '#e04c8c'}
                        }}
                ]
            }
        ]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
}
/**
 * 获取渠道名称列表
 */
VpnChannelActionInfo.getChannelNames = function(){
    let ajax = new $ax(Feng.ctxPath + "/vpnChannelActionInfo/get/names", function (data) {
        VpnChannelActionInfo.showChannelNameList(data);
    }, function (data) {
        Feng.error("获取渠道名称列表失败!"+ "!");
    });
    ajax.start();
}

VpnChannelActionInfo.showChannelNameList = function(names){
    VpnChannelActionInfo.channelXmSelect = xmSelect.render({
        el: '#div-channelList',
        language: 'zn',
        data: names
    });
    if (names == null || names.length == 0){
        return;
    }

    $("#totalSelect").val("");
    $("#lineSelect").val("");
    $("#funnelSelect").val("");

    setTimeout(function () {
        VpnChannelActionInfo.getChannelTotal();
    },1000)

    setTimeout(function () {
        VpnChannelActionInfo.getChannelLine();
    },1200)

    setTimeout(function () {
        VpnChannelActionInfo.getChannelFunnel();
    },1300)
}

/**
 * 选择渠道确认按钮事件
 */
VpnChannelActionInfo.btnSelectChannel = function(){
    let selectArr = VpnChannelActionInfo.channelXmSelect.getValue();
    // var ss = JSON.stringify(selectArr, null, 2);
    let len = selectArr.length;
    if (len === 0){
        Feng.error("请选择渠道")
        return;
    }
    VpnChannelActionInfo.channelNoArr = "";
    for (let i = 0; i < len; i++) {
        if (i === len-1){
            VpnChannelActionInfo.channelNoArr += selectArr[i].value;
        }else{
            VpnChannelActionInfo.channelNoArr += selectArr[i].value+",";
        }
    }

    $("#totalSelect").val("");
    $("#lineSelect").val("");
    $("#funnelSelect").val("");

    VpnChannelActionInfo.getChannelTotal();
    VpnChannelActionInfo.getChannelLine();
    VpnChannelActionInfo.getChannelFunnel();
}


$(function () {
    DateUtils.expandDate();

    VpnChannelActionInfo.getChannelNames();

    setTimeout(function () {
        VpnChannelActionInfo.tableList();
    },800)

});
